<template>
  <div>
    <div style="position: absolute;top: 0;left: 0;width: 100%;height:52px;background-color: #475669"></div>
    <div style="position: absolute;top:50px;left: 0;height: 100%;width:249px;background-color: #475669"></div>
    <div style="position: absolute;color: white;font-size: 20px;padding: 10px 80px">
      <p>树叶招聘网</p>
    </div>
    <div style="position: fixed;top: 16px;left:1300px;color: white;z-index: 999">
      <h3>欢迎登录:</h3>
    </div>
    <div style="position: absolute;top: 60px;left:80px;color: #669dff">
      <h1>权限管理</h1>
    </div>
    <div style="position: absolute;top: 80px;left:300px;">
      <el-table :data="filterTableData" style="width: 1400px">
        <!--      filterTableData这个表中其实已经包含了id,只是没有将它显示在前端页面上-->
        <el-table-column label="账号" prop="account" width="205"/>
        <el-table-column label="密码" prop="password" width="205"/>
        <el-table-column label="职位" prop="position" width="205"/>
        <el-table-column label="email" prop="email" width="205"/>
        <el-table-column label="角色" prop="role" width="205"/>
        <el-table-column label="操作" width="350">
          <template #default="scope">
            <el-button plain  type="primary" size="small" @click="uplimit(scope.row.role,scope.row.id)">
              升权
            </el-button>
            <el-button plain  type="success" size="small" @click="relimit(scope.row.role,scope.row.id)">
              降权
            </el-button>
            <el-button plain  type="danger" size="small" @click="ban(scope.row.role,scope.row.id,scope.row.isban)">
              封禁
            </el-button>
            <el-button plain  type="warning" size="small" @click="remove(scope.row.role,scope.row.id,scope.row.isban)">
              解封
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="position: absolute;top: 0;left:1400px;z-index:999">
      <div class="dropdown">
        <button class="dropbtn">{{user.account}}</button>
        <div class="dropdown-content">
<!--          <a @click="this.$router.push('/personal')">个人主页</a>-->
          <a @click="this.$router.push('/user-manage')">编辑账号</a>
          <a @click="this.$router.push('/userlimit')">权限管理</a>
          <a @click="this.$router.push('/home-page')">回到主页</a>
          <a @click="exit">退出登录</a>
        </div>
      </div>
    </div>
    <div style="position: absolute">
      <ul class="ts">
        <li><a @click="this.$router.push('/seekingjob')" v-if="user.position === '求职者'">求职</a></li>
        <li><a @click="this.$router.push('/employ')" v-if="user.position === 'HR'">招聘</a></li>
        <li><a @click="this.$router.push('/recommendation')" v-if="user.position === '求职者'">推荐</a></li>
        <li><a @click="this.$router.push('/record')" v-if="user.position === '求职者'">申请记录</a></li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
.ts {
  height: 52px;
  list-style-type: none;
  margin-left: 400px;
  padding: 0;
  overflow: hidden;
  background-color: #39494d;
}
.ts li {
  float: left;
}

.ts li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.ts li a:hover{
  color:#00e3e6 ;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<script >
import axios from "axios";
import request from "@/Utils/request.js";
import { computed, ref } from 'vue'
import {InfoFilled} from "@element-plus/icons-vue";
export default {
  computed: {
    InfoFilled() {
      return InfoFilled
    }
  },
  data(){
    return{
      filterTableData:[],
      centerDialogVisible:false,
      forms:{
        id:'',
        position:'',
        email:'',
        account:'',
        password:'',
        role:'',
        isban:'',

      },
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    }
  },
  mounted(){
    request.get('/user/all').then(res=>{
      this.filterTableData=res
    })
  },
  methods:{
    remove(role,id,isban){
      request.put(`user/removeaccount/${id}`).then(res=>{
        this.$message({
          message:'操作成功!已解除对该用户的封禁',
          type:'success'
        })
      })
    },
    ban(role,id,isban){
    if(role === 'admin'){
      this.$message({
        message:'系统异常,哥们,你以为你权利多大,还想把管理员封了?',
        type:'error'
      })
    }
    else if(isban === 0){
      this.$message({
        message:'系统异常,该用户已被封禁',
        type:'warning'
      })
    }else {
      request.put(`user/banaccount/${id}`).then(res=>{
        this.$message({
          message:'操作成功!已将该用户封禁',
          type:'success'
        })
      })
    }
    },
    relimit(role,id){
        if(role === 'user'){
          this.$message({
            message:'系统异常,不要瞎搞',
            type:'error'
          })
        }else {
          //传入一个值给后端就行
          request.put(`user/relimit/${id}`,this.forms).then(res=>{
            this.$message({
              message:'操作成功!',
              type:'success'
            })
          })
        }
    },
    uplimit(role,id){
      if(role === 'admin'){
        this.$message({
          message:'系统异常,哥们,你要多大权利?',
          type:'error'
        })
      }else {
        //传入一个值给后端就行
        axios.put(`user/uplimit/${id}`,this.forms).then(res=>{
          this.$message({
            message:'操作成功!',
            type:'success'
          })
        })
      }
    },
    exit(){
      localStorage.removeItem("user");
      this.$router.push('/')
      this.$message({
        message:'退出成功!',
        type:'success'
      })
    },
  }
}

</script>